<template>
  <view>
    <view class="alldiv">
      <!-- 这个是返回 -->
      <view class="navdiv">
        <u-navbar back-text="返回" :leftText="language.Wallet.nav" @leftClick="navigateBack"></u-navbar>
      </view>
      <!-- 这个是头部区域 -->
      <view class="headdiv">
        <!-- 钱包卡片区域 -->

        <view class="wallet-card">
          <view class="wallet-container">
            <view class="wallet-text">
              <image
                  style="width: 30px; height: 30px; border-radius: 43px"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  mode="scaleToFill"
              />
              <span style="margin-left: 10px">张三</span>
            </view>

            <view class="cost-container">
              <text style="color: rgba(56, 56, 56, 1); font-size: 12px">￥</text>
              <text
                  style="
                    margin-left: 3px;
                    font-size: 24px;
                    font-weight: bold;
                    color: rgba(56, 56, 56, 1);
                  "
              >12.030</text>
            </view>

            <view style="margin-top: 16rpx">{{language.Wallet.zhye}}</view>
          </view>

          <view class="nfc-container">
            <text>NFC{{ language.Wallet.kpye }}</text>
            <text>￥ 12.030</text>
          </view>

          <view class="cz-container">  {{language.Wallet.cz}}</view>
        </view>
      </view>
      <!-- 这个是选项卡区域 -->
      <view class="listdiv">
        <!-- 分类 -->
        <view class="classificationdiv">
          <view class="dd">
            <image
                style="width: 48px; height: 48px"
                src="../../static/image/BankCard.png"
                mode="scaleToFill"
            />
            <span
                style="
                margin-left: 10px;
                font-size: 12px;
                color: rgba(51, 51, 51, 1);
              "
            >{{ language.Wallet.bdyhk }}</span>
          </view>
          <view class="dd">
            <image
                style="width: 48px; height: 48px"
                src="../../static/image/payment.png"
                mode="scaleToFill"
            />
            <span
                style="
                margin-left: 10px;
                font-size: 12px;
                color: rgba(51, 51, 51, 1);
              "
            >{{ language.Wallet.zfsz }}</span>
          </view>
        </view>
        <!-- 选项卡 -->
        <view class="listd">
          <view class="fangdiv">
            <!-- 这个是卡片listdiv -->
            <view class="kplistdiv" v-for="(item, i) in list" :key="i">
              <!-- 这个是标题 -->
              <view class="titlediv">{{ item.title }}</view>
              <view class="tagdiv">
                <u-tag
                    v-for="(itemd, d) in item.tag"
                    style="margin-left: 10px"
                    bgcolor="rgba(47, 212, 184, 1)"
                    :key="d"
                    :text="itemd"
                    plain
                    size="mini"
                    type="warning"
                ></u-tag>
              </view>
              <view class="costdivtwo">
                <!-- 价格区域 -->
                <view class="c1">
                  <span style="font-size: 12px; color: rgba(255, 51, 51, 1)">￥</span>
                  <span
                      style="
                      margin-left: 4px;
                      font-size: 18px;
                      font-weight: bold;
                      color: rgba(255, 51, 51, 1);
                    "
                  >{{ item.cost }}</span>
                  <span
                      style="
                      margin-left: 10px;
                      font-size: 10px;
                      text-decoration-line: line-through;
                      color: rgba(153, 153, 153, 1);
                    "
                  >￥{{ item.cost }}</span>
                </view>
                <!-- 购买区域 -->
                <view class="b1">
                  <view>
                    <u-button
                        type="primary"
                        color="linear-gradient(135deg, rgba(255, 141, 26, 1) 0%, rgba(255, 82, 82, 1) 100%)"
                        :text="language.Wallet.gm"
                    ></u-button>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      language: {},
      list: [
        {
          title: "【周卡】7天无限次",
          tag: ["城市限定", "指定日期"],
          cost: "12.30",
          originalcost: "15"
        },
        {
          title: "【周卡】7天无限次",
          tag: ["城市限定", "指定日期"],
          cost: "12.30",
          originalcost: "15"
        },
        {
          title: "【周卡】7天无限次",
          tag: ["城市限定", "指定日期"],
          cost: "12.30",
          originalcost: "15"
        },
        {
          title: "【周卡】7天无限次",
          tag: ["城市限定", "指定日期"],
          cost: "12.30",
          originalcost: "15"
        }
      ]
    };
  },
  onShow: function() {
    this.getlanguagedata();
    console.log("Personalcenter Show");
  },
  onLoad() {
    this.getlanguagedata();
    this.loadmore();
  },
  mounted() {
    this.getlanguagedata();
  },

  methods: {
    getlanguagedata() {
      this.language = this.$store.getters[
          "internationalization/getinternationalization"
          ];
    },
    btn() {
      console.log("我报点击；");
    },
    // 返回上一个页面
    navigateBack() {
      uni.navigateBack({
        delta: 1,
        success: () => {
          // 返回成功后的回调函数
        },
        fail: () => {
          // 返回失败后的回调函数
        }
      });
    }
  }
};
</script>

<style lang="less">
.alldiv {
  width: 100vw;
  height: 100vh;
  .navdiv {
    width: 100%;
    height: 10%;
    overflow: hidden;
    z-index: 999999;
  }
  //   这个是钱包卡片区域
  .headdiv {
    width: 100%;
    // height: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32rpx;
    // 这个是卡片区域样式
    .qbkpduv {
      width: 90%;
      // height: 60%;
      height: 306rpx;
      overflow: hidden;
      //   background-color: chocolate;
      border-radius: 16.48px 16.48px 16.48px 16.48px;
      background-color: rgba(86, 120, 111, 1);
      // 卡片第一层样式
      .onediv {
        width: 100%;
        height: 80%;
        border-radius: 0 0 16px 16px;
        background-color: #e9feed;
        display: flex;
        .messagediv {
          width: 45%;
          height: 100%;
          overflow: hidden;
          z-index: 999;
          color: rgba(51, 51, 51, 1);
          font-size: 12px;
          .headimagediv {
            width: 100%;
            height: 40%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          //  金额样式
          .costdiv {
            width: 100%;
            height: 30%;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            margin-top: 60rpx;
          }
          //   金额标题区域
          .titpdiv {
            width: 100%;
            height: 30%;
            font-size: 12px;
            color: rgba(153, 153, 153, 1);
            display: flex;
            justify-content: center;
            align-items: flex-start;
          }
        }
        // 卡片阴影区域样式
        .shadowdiv {
          width: 60%;
          height: auto;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          flex-direction: column;
          .o1 {
            width: 50%;
            height: 50px;
            opacity: 0.3;
            margin-left: 50%;
            border-radius: 8px;
            background: linear-gradient(
                136.07deg,
                rgba(61, 233, 146, 0) 0%,
                #3de992 100%
            );
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            z-index: 9999;
            .btn1 {
              width: auto;
              height: 20px;
              opacity: 1;
              border-radius: 17px 0 0 17px;
              background: #ffffff;
              display: flex;
              color: rgba(47, 212, 184, 1);
              align-items: center;
              justify-content: center;
              z-index: 9999;
            }
          }
          .o2 {
            left: 164px;
            top: 5px;
            width: 60%;
            height: 55px;
            opacity: 0.5;
            border-radius: 8px;
            background: linear-gradient(
                234.81deg,
                #2fd4b8 0%,
                rgba(47, 212, 184, 0) 100%
            );
          }
        }
      }
      // 卡片第二层样式
      .twodiv {
        width: 95%;
        height: 20%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  //   选项卡样式
  .listdiv {
    width: 100%;
    height: 55%;
    //分类的样式
    .classificationdiv {
      width: 90%;
      // height: 30%;
      height: 168rpx;
      border-radius: 16rpx;
      background-color: #ffffff;
      box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
      margin: auto;
      margin-bottom: 20px;
      box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
      display: flex;
      .dd {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    // 选项卡样式
    .listd {
      // width: 90%;
      // height: 200px;
      overflow: auto;
      margin: auto;
      .fangdiv {
        width: 100%;
        // height: 200rpx;
        height: auto;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        flex-direction: column;
        //   这个是卡片listdiv
        .kplistdiv {
          padding: 32rpx 24rpx;
          width: 90%;
          // height: 40%;
          height: 200rpx;
          margin-bottom: 20rpx;
          overflow: hidden;
          box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
          // background-color: #ffffff;
          background: linear-gradient(176.66deg, rgba(233, 254, 237, 1) 0%, rgba(255, 255, 255, 0) 100%);
          box-shadow: 0px 2px 4px  rgba(5, 48, 7, 0.08);
          box-sizing: border-box;
          border-radius: 16rpx;
          .titlediv {
            width: 100%;
            // height: 33.33%;
            font-size: 12px;
            margin-bottom: 4rpx;
          }
          .tagdiv {
            width: 100%;
            height: 33.33%;
            display: flex;
            margin-left: -20rpx;
          }
          .costdivtwo {
            width: 100%;
            height: 33.33%;
            display: flex;
            // 购买样式
            .c1 {
              width: 50%;
              height: 100%;
              display: flex;
              align-items: center;
              margin-top: 12rpx;
            }
            .b1 {
              width: 50%;
              height: 100%;
              display: flex;
              justify-content: flex-end;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
/deep/ .u-button {
  color: #ffffff !important;
  background-color: linear-gradient(
      135deg,
      rgba(255, 141, 26, 1) 0%,
      rgba(255, 82, 82, 1) 100%
  ) !important;
  width: 60px !important;
  height: 24px !important;
  border-radius: 6px;
  border: none;
}
</style>

<style lang="less" scoped>
.wallet-card {
  position: relative;
  width: 686rpx;
  height: 402rpx;
  border-radius: 32rpx;
  background: rgba(86, 120, 111, 1);
}

.wallet-container {
  padding: 40rpx 44rpx;
  box-sizing: border-box;
  height: 306rpx;
  background: linear-gradient(
      94.07deg,
      rgba(235, 255, 236, 1) 0%,
      rgba(220, 247, 242, 1) 100%
  );
  border-radius: 32rpx;
}

.nfc-container {
  padding: 0 48rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 96rpx;
  border-radius: 0 0 32rpx 32rpx;
  background: rgba(86, 120, 111, 1);
  color: #fff;
}
.wallet-text {
  display: flex;
  // justify-content: center;
  align-items: center;
}
.cost-container {
  margin-top: 60rpx;
  font-size: 24px;
  font-weight: 700;
}

.cz-container {
  position: absolute;
  right: 0;
  bottom: 140rpx;
  width: 96rpx;
  font-size: 12px;
  text-align: center;
  height: 40rpx;
  border-radius: 17px 0px, 0px, 17px;
  background: rgba(255, 255, 255, 1);
  border-radius: 12px 0 0px 12px;
}
</style>
